<template>
    <div>
        <el-dialog
            :title="videoPlayerTitle"
            :visible.sync="previewDialog"
            width="800px"
            append-to-body
            class="video-player-dialog"
            :before-close="closeDialog"
        >
            <videoPlayer
                v-if="previewVarExt === 'mp4' || previewVarExt === 'mp3'"
                :pause="!previewDialog"
                :playerUrl="previewUrl"
            />
            <el-image
                v-else-if="videoPlayerTitle === '图片预览'"
                style="max-width: 100%; max-height: 500px"
                :src="previewUrl"
                fit="cover"
                :preview-src-list="[previewUrl]"
                class="preview-img"
            ></el-image>
            <div class="pdf-preview" v-else>
                <div>
                    <pdf
                        :src="previewUrl"
                        :page="currentPage"
                        @num-pages="pageCount = $event"
                        @page-loaded="currentPage = $event"
                        @loaded="loadPdfHandler"
                        @progress="pdfLoadProgress"
                        @error="pdfLoadError"
                    ></pdf>
                </div>

                <el-pagination
                    layout="prev, pager, next"
                    :current-page="currentPage"
                    :total="pageCount"
                    @current-change="changePdfPage"
                    class="pagination"
                >
                </el-pagination>
            </div>
            <div class="pdfLoading" v-if="pdfLoading">
                <p>正在加载中请稍等,已加载{{ (progress * 100).toFixed(2) }}%</p>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import videoPlayer from '@/components/videoPlayer'
import pdf from 'vue-pdf'
export default {
    name: 'preview',
    data () {
        return {
            previewDialog: false,
            videoPlayerTitle: '',
            currentPage: 1,
            pageCount: 0,
            pdfLoading: null,
            progress: 0
        }
    },
    components: {
        videoPlayer,
        pdf
    },
    model: {
        prop: 'showPreview',
        event: 'change'
    },
    props: ['showPreview', 'previewVarExt', 'pause', 'previewUrl'],
    watch: {
        showPreview (val) {
            this.previewDialog = val
        },
        previewVarExt (val) {
            var regFile = ['doc', 'xls', 'ppt', 'docx', 'xlsx', 'pptx', 'pdf']
            var regImg = ['jpg', 'png', 'bmp']
            if (val == 'mp4') {
                this.videoPlayerTitle = '视频预览'
            } else if (val == 'mp3') {
                this.videoPlayerTitle = '音频预览'
            } else if (regImg.indexOf(val) !== -1) {
                this.videoPlayerTitle = '图片预览'
            } else if (regFile.indexOf(val) !== -1) {
                this.videoPlayerTitle = '文件预览'
                this.pdfLoading = true
                this.currentPage = 1
                this.pageCount = 0
            } else {
                this.videoPlayerTitle = ''
            }
        }
    },
    methods: {
        closeDialog () {
            this.$emit('change', false);
        },
        changePdfPage (val) {
            this.currentPage = val
        },
        loadPdfHandler () {
            this.currentPage = 1
            this.pdfLoading = false
        },
        pdfLoadProgress (progress) {
            this.progress = progress
        },
        pdfLoadError (error) {
            console.log(error)
            this.pdfLoading = false
            this.$message({
                message: '文件加载错误!',
                type: 'error'
            });
        }
    }
}
</script>
<style scoped>
.video-player-dialog >>> .el-dialog__header {
    padding: 10px;
}
.video-player-dialog >>> .el-dialog__headerbtn {
    top: 10px;
    right: 10px;
}
.video-player-dialog >>> .el-dialog__body {
    padding: 0px 10px 10px;
}
.preview-img >>> .el-icon-circle-close {
    color: #fff;
}
.preview-img {
    display: block;
    margin: 0 auto;
}
.pdf-preview {
    position: relative;
}
.pdfLoading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}
.pdfLoading p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 20px;
    color: #fff;
}
.pagination {
    text-align: right;
    padding-top: 10px;
}
</style>